<template>
  <a-row
    :gutter="10"
    ref="main"
    id="main"
  >
    <a-col>
      <a-card>
        <a-row>
          <a-col
            :span="24"
            style="margin-bottom: 10px"
          >
            <a-form
              layout="inline"
              :form="form"
              @submit="handleSubmit"
            >
              <a-form-item label="是否有著作权">
                <a-select
                  style="width: 180px"
                  placeholder="请选择是否有著作权"
                  v-model="patentFlag"
                >
                  <a-select-option
                    :value="item.value"
                    v-for="item in columns"
                    :key="item.value"
                  >
                    {{ item.title }}
                  </a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item label="品牌">
                <a-select
                  style="width: 180px"
                  placeholder="请选择品牌"
                  @change="handeleSelectChange"
                  v-model="brand"
                  allow-clear
                >
                  <a-spin
                    v-if="fetching"
                    slot="notFoundContent"
                    size="small"
                  />
                  <a-select-option
                    :value="item.value"
                    v-for="item in brandList"
                    :key="item.code"
                  >
                    {{ item.value }}
                  </a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item label="货季">
                <a-select
                  style="width: 180px"
                  placeholder="请选择货季"
                  @change="selectSeason"
                  v-model="season"
                  allow-clear
                >
                  <a-spin
                    v-if="fetching"
                    slot="notFoundContent"
                    size="small"
                  />
                  <a-select-option
                    :value="item.value"
                    v-for="item in seasons"
                    :key="item.code"
                  >
                    {{ item.value }}
                  </a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item label="名称">
                <a-input
                  placeholder="请输入名称"
                  v-model="name"
                  allow-clear
                ></a-input>
              </a-form-item>

              <a-form-item label="图案编号">
                <a-input
                  placeholder="请输入图案编号"
                  v-model="code"
                  allow-clear
                ></a-input>
              </a-form-item>

              <a-form-item>
                <a-button
                  type="primary"
                  html-type="submit"
                >搜索</a-button>
                <a-button
                  type="primary"
                  @click="resetForm"
                  style="margin-left: 10px"
                >重置</a-button>
              </a-form-item>
            </a-form>
          </a-col>
        </a-row>
        <create
          v-if="showAdd"
          :patentId="patentId"
          :patternId="patternId"
          @close="close"
        ></create>
        <a-modal
          v-model="visible"
          title="图片预览"
          @ok="visible = false"
          :footer="null"
          width="60%"
          :mask="true"
        >
          <div class="previmg">
            <img :src="prevImageUrl" />
          </div>
        </a-modal>
      </a-card>
    </a-col>
    <a-col
      :md="24"
      :sm="24"
    >
      <a-card
        :style="{ marginTop: '24px' }"
        class="list-content"
        id="content"
      >
        <div
          class="ant-pro-pages-list-projects-cardList"
          style="clear: both"
        >
          <a-list
            :loading="loading"
            :data-source="dataSource"
            :grid="{ gutter: 0 }"
          >
            <div
              v-if="showLoadingMore"
              slot="loadMore"
              :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }"
            >
              <a-spin v-if="loadingMore" />
              <a-button
                v-else
                @click="onLoadMore"
              > loading more </a-button>
            </div>
            <a-list-item
              slot="renderItem"
              slot-scope="item"
            >
              <a-card
                style="cursor: pointer"
                :id="item.id"
                class="ant-pro-pages-list-projects-card"
                hoverable
              >
                <img
                  slot="cover"
                  v-for="(imgUrl, index) in item.imgUrls"
                  :key="`${item.id}-${index}`"
                  :src="imgUrl ? imgUrl : 'https://img.bzhz.jnbygroup.com/cloth.png'"
                  :alt="imgUrl"
                  @click="prevImg(imgUrl)"
                />
                <div class="cardItemContent">
                  <h3>图案名称:{{ item.name }}</h3>
                  <p class="title">品牌:{{ item.brandCode }}</p>
                  <p class="price">季节:{{ item.season }}</p>
                  <!-- <p class="price">工号:{{item.jobNumber}}</p> -->
                  <p class="price">编号:{{ item.code }}</p>
                  <!-- <p class="price" v-if="item.commentsId == 0">批注:无</p> -->
                  <!-- <p class="price" v-else>批注:{{item.commentsId}}</p> -->
                </div>
                <template
                  slot="actions"
                  class="ant-card-actions"
                >
                <a-icon
                 v-if="patentFlag == 20"
                    type="plus-circle"
                    theme="twoTone"
                    @click="add(item.id,item.patentId)"
                  />
                  <a-icon
                  v-else
                    type="edit"
                    theme="twoTone"
                    @click="add(item.id,item.patentId)"
                  />
                  <a-icon
                    type="delete"
                    theme="twoTone"
                    two-tone-color="#eb2f96"
                    @click="deleteRecord(item,2)"
                  />
                </template>
              </a-card>
            </a-list-item>
          </a-list>
        </div>
      </a-card>
    </a-col>
  </a-row>
</template>
<script>
import create from './create.vue'
import { listMixin } from '../util/listMixin'
import { getSystemPro } from '@api/pattern/index.js'
const columns = [
  {
    title: '有著作权',
    value: 10
  },
  {
    title: '无著作权',
    value: 20
  }
]
export default {
  mixins: [listMixin],

  components: {
    create
  },

  data() {
    return {
      columns,
      seasons: [],
      season: undefined,
      showAdd: false,
      patternId: '',
      scrollHeight: '',
      urlKey: 'pattern',
      visible: false,
      pageSize: 10,
      loading: false,
      prevImageUrl: '',
      patentFlag: 10,
      showLoadingMore: false,
      loadingMore: false,
      fetching: false,
      brandList: []
    }
  },

  computed: {
    getBrand() {
      return function (weid) {
        const brand = this.brands.find(item => item.weid == weid)
        return brand ? brand.name : ''
      }
    }
  },
  created() {},
  beforeRouteLeave(to, from, next) {
    this.scrollHeight = document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset
    next()
  },
  deactivated() {
    sessionStorage.setItem('scrollHeight', this.scrollHeight)
  },
  activated() {
    setTimeout(() => {
      this.$refs.main.scrollTop = document.body.scrollTop = document.querySelector('#main').scrollTop = document.documentElement.scrollTop = this.scrollHeight
    }, 60)
  },
  mounted() {
    this.getsysPro()
    this.getBrandList()
  },
  methods: {
    selectSeason(season) {
      this.season = season
    },
    handeleSelectChange(brand) {
      this.brand = brand
    },
    async getsysPro() {
      try {
        const res = await getSystemPro('season')
        this.seasons = res.data || []
        this.seasons.sort((a, b) => {
          var seasonOrder = ['2020春夏', '2020秋冬', '2021春夏', '2021秋冬', '2022春夏', '2022秋冬', '2023春夏', '2023秋冬']
          return seasonOrder.indexOf(a.code) - seasonOrder.indexOf(b.code)
        })
        console.log(this.seasons)
      } catch (error) {
        console.log(error)
      }
    },
    async getBrandList() {
      const data = {
        jobNumber: this.jobNumber
      }
      const res = await getSystemPro('brand', data)
      if (res.code == 200) {
        this.brandList = res.data
      } else {
        this.$message.error(res.msg || res.message)
      }
    },
    prevImg(url) {
      if (typeof url == 'string' && url != '') {
        this.prevImageUrl = url
        this.visible = true
      }
    },
    close(values, type) {
      this.showAdd = false
      this.loadData()
      if (type == 0) {
        this.loadData()
      } else {
        this.dataSource.map(item => {
          if (item.id == values.patternId) {
            item.patentId = values.content
          }
        })
      }
    },
    add(patternId, patentId) {
      this.showAdd = true
      this.patternId = patternId
      this.patentId = patentId
    },
    resetForm() {
      console.log('重置表达')
      this.form.resetFields()
      this.loadData(1)
    }
  }
}
</script>

<style scoped lang="less">
@import './less/index.less';
.mr-10 {
  margin-right: 10px;
}
.previmg {
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    max-width: 300px;
  }
}
</style>